
<template>
  <Swiper
    v-if="swiperList.length>0"
    :autoPlay="autoPlay"
    :showIndicator="showIndicator"
    :interval="interval"
    :duration="duration"
  >
    <Slide v-for="(item,index) in swiperList" :key="index" @click="clickSwiper(item)">
      <img :src=" item" />
    </Slide>
  </Swiper>
</template>
 
<script>
import { Swiper, Slide } from "vue-swiper-component";
export default {
  watch: {
    swiperList(newValue, oldValue) {
      console.log(newValue, oldValue);
    },
  },
  props: {
    /**
     * 是否自动轮播
     */
    autoPlay: {
      type: Boolean,
      default: true,
    },
    /**
     * 是否显示轮播的点
     */
    showIndicator: {
      type: Boolean,
      default: true,
    },
    /**
     * 每两次隔多久滚动一次
     */
    interval: {
      type: Number,
      default: 2500,
    },
    /**
     * 每次滚动一页需要多久
     */
    duration: {
      type: Number,
      default: 500,
    },
  },
  data() {
    return { swiperList: [] };
  },

  components: {
    Swiper,
    Slide,
  },

  computed: {},
  created() {
  },
  mounted() {

       
  },

  methods: {
    /**
     * 轮播图点击事件
     */
    clickSwiper(data) {
      this.$emit("clickSwiper", data);
    },
    setList(data){
        if(data!=null){
          if(data.product.albumPics==''||data.product.albumPics==null){
            this.swiperList=[data.product.pic];
          }else{
             this.swiperList.push(data.product.pic)
            data.product.albumPics.split(',').map(e=>{
              this.swiperList.push(e)
            })
           
          }
            
        }
    }
  },

  watch: {},
};
</script>

<style lang='less' scoped>
.wh_slide img {
  width: 100%;
  height: 40vh;
}

.wh_indicator_item {
  background: hsla(0, 0%, 92.9%, 0.4);
}
.wh_show_bgcolor {
  background: #ededed;
}
</style>
